<!-- 产品中心 - 产品列表  -->
<template>
  <TableList ref="tableListRef">
    <template #tabs-top>
      <div
        v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
        class="custom-segmented-style"
      >
        <el-segmented v-model="tableListType" :options="typeTabs" block @change="handleTypeClick" />
      </div>
    </template>
  </TableList>

  <!-- 排序弹窗：修改 -->
  <RecommendSortForm ref="recommendSortFormRef" @success="getList" />
</template>

<script lang="ts" setup>
import TableList from './components/TableList.vue'
import RecommendSortForm from './form/RecommendSortForm.vue'
defineOptions({ name: 'ProductSpu' })

const tableListType = ref('')
const tableListRef = ref<any>()

// tabs 数据
const typeTabs = ref<any>([
  {
    label: '全部',
    value: ''
  },
  {
    label: '商城购物',
    value: 'mall'
  },
  {
    label: '餐饮美食',
    value: 'food'
  },
  {
    label: '酒店住宿',
    value: 'hotel'
  },
  {
    label: '家政服务',
    value: 'housekeeping'
  },
  {
    label: '休闲娱乐',
    value: 'entertainment'
  }
])

const getList = async (type?: string | number) => {
  tableListType.value = type ? type.toString() : ''
  tableListRef.value?.openList(type)
}

const handleTypeClick = (value: string) => {
  getList(value)
}
</script>

<style lang="scss" scoped>
.custom-segmented-style .el-segmented {
  --el-border-radius-base: 1px;

  background: var(--el-color-primary-light-8);
  border: 1px solid var(--el-color-primary-light-7);
}
</style>
